<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>xxxx</title>
    <link href="../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

    <div id="nav" th:fragment="nav(activeIndex)" class="nav" v-cloak>
        <div class="collapse-btn" @click="onClickCollapse">
            <div class="collapse-btn-icons" :class="isCollapse?'':'rotate90'">
                <i class="collapse-btn-icon el-icon-minus"></i>
                <i class="collapse-btn-icon el-icon-minus"></i>
                <i class="collapse-btn-icon el-icon-minus"></i>
            </div>
        </div>
        <el-menu default-active="home" th:attr="default-active=${activeIndex}" class="el-nav-menu" :collapse="isCollapse" :default-openeds="['core','setup']">

            <el-menu-item index="home" @click="onClickHome">
                <i :class="'nav-icon nav-icon-home'+(active=='home'?'-active':'')"></i>
                <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="core" :show-timeout="0" :hide-timeout="200">
                <template slot="title">
                    <i :class="'nav-icon nav-icon-purchase'+(activePurchase?'-active':'')"></i>
                    <span slot="title">商订管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="setOrder" @click="onClickSetOrder">
                        <span slot="title">订单查询</span>
                    </el-menu-item>
                    <el-menu-item index="setGoods" @click="onClickSetGoods">
                        <span slot="title">商品查询</span>
                    </el-menu-item>
                    <el-menu-item index="addGoods" @click="onClickAddGoods">
                        <span slot="title">添加商品</span>
                    </el-menu-item>
                    <el-menu-item index="category-setup" @click="onClickCateGorySetup">
                        <span slot="title">类别查询</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="setup" :show-timeout="0" :hide-timeout="200">
                <template slot="title">
                    <i :class="'nav-icon nav-icon-setup'+(activeSetup?'-active':'')"></i>
                    <span slot="title">用户管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="user-setup" @click="onClickUserSetup">
                        <span slot="title">商户查询</span>
                    </el-menu-item>
                    <el-menu-item index="add-user" @click="onClickaddUserSetup">
                        <span slot="title">添加商户</span>
                    </el-menu-item>
                    <el-menu-item index="add-user" @click="onClickaddUserSetup">
                        <span slot="title">登录查询</span>
                    </el-menu-item>


                </el-menu-item-group>
            </el-submenu>

        </el-menu>
    </div>
    <a id="jump">
        <p></p>
    </a>

    <script src="../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
    <script src="../static/js/element.js" th:src="@{/static/js/element.js}"></script>
    <script src="../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script src="../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
    <!-- 定义vue组件 -->
    <script th:fragment="vue(activeIndex)" th:inline="text">
        var initialCollapse = loadCache("navCollapse");
        if (initialCollapse === null) {
            initialCollapse = true;
        }
        var marginHelper = $('.margin-helper');
        if (!initialCollapse) {
            marginHelper.addClass('margin-for-nav');
        }
        setTimeout(function () {
            marginHelper.addClass('margin-for-nav-transition');
        }, 100);
        new Vue({
            el: '#nav',
            data: {
                isCollapse: initialCollapse,
                active: '[[${activeIndex}]]',
            },
            computed: {
                //菜单导航
                activePurchase: function () {
                    switch (this.active) {
                        case 'setOrder':
                        case 'setGoods':
                        case 'addGoods':
                            return true;
                        default:
                            return false;
                    }
                },
                //系统设置
                activeSetup: function () {
                    switch (this.active) {
                        case 'user-setup':
                        case 'category-setup':
                        case 'add-user':
                            return true;
                        default:
                            return false;
                    }
                },
            },
            methods: {
                //nav样式
                onClickCollapse: function (e) {
                    this.isCollapse = !this.isCollapse;
                    saveCache("navCollapse", this.isCollapse);
                    document.getElementsByClassName("collapse-btn")[0].blur();
                    if (this.isCollapse) {
                        marginHelper.removeClass('margin-for-nav');
                    } else {
                        marginHelper.addClass('margin-for-nav');
                    }
                },
                //首页
                onClickHome: function () {
                    jumpToURL("/wxhsh/view/home");
                },
                //菜单导航
                onClickSetOrder: function () {
                    jumpToURL("/wxhsh/view/orders");
                },
                onClickSetGoods: function () {
                    jumpToURL("/wxhsh/view/products");
                },
                onClickAddGoods: function () {
                    jumpToURL("/wxhsh/view/add-product");
                },
                //设置模块
                onClickUserSetup: function () {
                    jumpToURL("/wxhsh/view/users");
                },
                onClickCateGorySetup: function () {
                    jumpToURL("/wxhsh/view/category");
                },
                onClickaddUserSetup:function () {
                    jumpToURL("/wxhsh/view/add-user");
                }
            },
        })
    </script>

</body>

</html>